import Head from 'next/head'
import { Row, Col, Spin, List, Affix } from 'antd'
import React, { useState } from 'react'
import { Timeline } from 'antd';
import { ClockCircleOutlined } from '@ant-design/icons';
import Author from '../components/Author'
import Footer from '../components/Footer'
import About from '../components/About'

const Personal = (list) => {
    return (
        <div>
            <Head>
                <title>About | a_liao的博客</title>
                <meta name="description" content="Generated by create next app" />
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <About />
            <Row className="comm-main" type="flex" justify="center">
                <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={10}  >
                    <h1>Hello Everyone !</h1>
                    <h2> &nbsp; &nbsp; &nbsp;我是liao，00后，软件工程在读，
                        被学长忽悠着开始了前端学习之旅，前端半吊子。从大一用hexo加github搭建网站，
                        到大二用gitee托管，购买域名，始终向往于自己编码搭建博客，跟随技术胖老师学习用react node antd来搭建博客，这个过程中第一次接触后端，并学习黄玄大佬的博客风格，期待博客成功上线的一天！
                        <br /> <br />
                        开发历程：<br /> <br />
                        <Timeline mode="alternate">
                            <Timeline.Item>大学开始 接触编程  2019-09-01</Timeline.Item>
                            <Timeline.Item color="red">hexo+gitee搭建个人网站 <s>已废弃</s> 2020</Timeline.Item>
                            <Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />}>
                                加入网络中心实验室 学习ReactNative开发，学习git团队协作开发模式 2020-09
                            </Timeline.Item>
                            <Timeline.Item color="red">Url Ping RN开发的测试网络App 参与0.5版的开发,项目已经上线谷歌商店<br/> 2015-09-01</Timeline.Item>
                            <Timeline.Item color="green">Next Koa React开发的个人博客 2022-01-17</Timeline.Item>
                            <Timeline.Item color="green">React Electron开发的桌面待办软件 2022-02-10</Timeline.Item>
                            <Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />}>
                                Now 
                            </Timeline.Item>
                        </Timeline>
                    </h2>
                </Col>
                <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
                    <Author />
                </Col>
            </Row>
            <Footer />
            <style>{`
                .comm-left{
                    background-color: #FFF;
                    padding: .9rem;
                    border-radius: .3rem;
                    border:1px solid #eee;
                }
                .comm-right{
                    background-color: #FFF;
                    margin-left: .5rem;
                    padding:.3rem;
                    border-radius: .3rem;
                    border-bottom:1px solid #eee;
                    }
                .comm-box{
                    background-color: #FFF;
                    margin-left: .5rem;
                    padding:.3rem;
                    border-radius: .3rem;
                    border:1px solid #eee;
                }
                .comm-main{
                    margin-top: .5rem;
                }
                .list-title{
                    font-size:1.3rem;
                    color: #404040;
                    padding: 0 0.5rem;
                }
                .list-context{
                    color:#777;
                    padding:.5rem;
                }
                .list-icon{
                    padding:.5rem 0;
                    color:#AAA;
                }
                .list-icon span{
                    display: inline-block;
                    padding: 0 10px;
                }
                code {
                    display: inline-block ;
                    background-color:#fff5f5;
                    border-radius:3px;
                    padding-left: 5px;
                    padding-right: 5px;
                    color:#ff502c;
                    margin: 0px 3px;
                    line-height: 1.1rem;
                    font-size: .87rem;
                }
                .list-go{
                    padding-left: 35rem;
                }
            `}</style>
        </div>
    )
}

export default Personal